/*
 * @Description: 登录页
 * @Author: Rfan
 * @Date: 2021-10-26 22:35:14
 * @LastEditTime: 2023-02-07 20:40:23
 */

import { FC, useEffect, useState } from 'react';
import { Avatar, Select, Space } from 'antd';
import classNames from 'classnames/bind';
import { appState, appActions } from '@/store/mobx';
import LoginPane from '@/view/Login/components/LoginPane';
import styles from './styles/index.module.scss';
import SubSysPicker from '@/view/Login/components/SubSysPicker';
import { getRealName, getToken } from '@/utils/auth';

const cx = classNames.bind(styles);

const { Option } = Select;

export type ILogin = {
  username: string;
  password: string;
};

/**
 * 页面组件开始🥧
 */
const Login: FC = () => {
  const [loginShowFlag, setLoginShowFlag] = useState(true);
  /**
   * @description: 获取公钥方法
   */
  useEffect(() => {
    // TODO: get public key method
    // 如果存有名字跟token自动跳转到选择子系统页面
    if (getToken() && getRealName()) {
      setLoginShowFlag(false);
    }
  }, []);

  /**
   * @description: 切换语言
   * @param {string} value 切换的语言
   */
  const langChange = (value: string) => {
    appActions.setLang(value);
  };

  return (
    <>
      <div className={cx('login')}>
        <div className={cx('header')}>
          <h1>数字档案馆系统</h1>
          <div className={cx('lang-switch')}>
            <Space>
              <label>多语言切换</label>
              <Select value={appState.lang} bordered={false} onChange={langChange}>
                <Option value="zh-CN">
                  <Avatar gap={4}>zh-CN</Avatar>
                  简体中文
                </Option>
                <Option value="en">
                  <Avatar gap={4}>en-US</Avatar>
                  English
                </Option>
              </Select>
            </Space>
          </div>
        </div>
        <div className={cx('login-content')}>
          {loginShowFlag ? (
            <LoginPane changePane={setLoginShowFlag} />
          ) : (
            <SubSysPicker setLoginShowFlag={setLoginShowFlag} />
          )}
        </div>
      </div>
    </>
  );
};

export default Login;
